<template>
    <div class='singer'>
        <el-table :data="singList" :show-header= false @row-click="openDetails" :row-class-name="tableRowClassName">
            <el-table-column prop="name" label=""></el-table-column>
            <el-table-column width="60"> 
                <i class="el-icon-arrow-right"></i> 
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            singList : [
                {name : '热门歌手' ,id :88},
                {name : '华语男歌手' ,id :1},
                {name : '华语女歌手' ,id :2},
                {name : '华语组合' ,id :3},
                {name : '日韩男歌手' ,id :4},
                {name : '日韩女歌手' ,id :5},
                {name : '日韩组合' ,id :6},
                {name : '欧美男歌手' ,id :7},
                {name : '欧美女歌手' ,id :8},
                {name : '欧美组合' ,id :9},
            ]
        };
    },
    methods: {
        openDetails(row){
            this.$router.push({path: `/singer/list/${row.id}`});
        },
        tableRowClassName({row, rowIndex}) {
            if (rowIndex === 0) {
                return 'margin-row';
            }
            return '';
        }
    },
}
</script>
<style lang='scss'>
.el-table .margin-row{margin-top: 15px;background: oldlace;}
</style>